react native "RNGestureHandlerRootView" was not found in the UIManager 에러를 하나 해결하면 또 다른 에러를 마주하는 것은 개발자의 숙명인가,,,, "cb() never called!" 에러를 해결한 후 바로 다른 에러를 만났다... 생소한 에러문을 보고 놀랐으나 다행히도 이 에러는 쉽게 해결할 수 있었다! expo install react-native-gesture-handler 를 통해서 추가적으로 설치하니 문제를 해결할 수 있었다! 또한 이 에러의 다른 해... react native내가 만났던 모든 에러들react native [React] useEffect vs useLayoutEffect useEffect hook만 사용하다 useLayoutEffect hook을 알게되어 차이점을 기록하려한다. 두 hook은 화면이 렌더링될 때 실행된다는 점에서는 동일하다. 그러나 약간의 차이점이 존재한다. 1) useEffect 화면이 레이아웃과 배치가 끝난 이후 실행된다. 아래의 코드를 살펴보자 위의 코드는 화면이 렌더링 될때 count state를 25로 변경해준 후 렌더링 할 것이다.... Reactreact nativeReact React Native - 개발 환경 설정 리액트 네이티브(React Native)는 자바스크립트(JavaScript)와 리액트(React) 라이브러리를 사용해 네이티브 앱을 개발할 수 있게 해주는 기술입니다. 리액트 네이티브를 사용해 만든 앱은 iOS환경, Android환경에서 모두 구동할 수 있습니다. 1. Node.js와 npm 설치하기 1.1 MacOS에서 설치하기 다음과 같은 스크릅트가 있습니다. 이 명령어를 입력하고 나서 ... ios 개발개발 공부react nativeios 개발 typescript 에러 'string | null' 형식의 인수는 'string' 형식의 매개 변수에 할당될 수 없습니다. 'null' 형식은 'string' 형식에 할당할 수 없습니다. 1. 무슨 내용의 에러인가 1. 우선 코드를 살펴보자 AsyncStorage에 있는 todos라는 key로 Object Value를 가져와서 rawTodos 변수에 저장한다. rawTodos에 저장되어있는 Object를 JSON.... 에러react nativetypescriptreact native React Native 에 SVG Icon 컴포넌트 작성 하지만 React Native 에서는 기본적으로 SVG 파일을 지원하지 않는다. 그럼 React Native 에서 SVG 파일을 아이콘으로 사용할 수 있도록 설정 및 구현해보자. 는 React Native 프로젝트에서 SVG 및 관련 엘리먼트들을 웹과 유사한 형식으로 사용할 수 있게 해주는 라이브러리다. react-native-svg 는 <Svg />, <G />, <Path /> 등 거의 ... react-native-svgreact-native-svg-transformer아이콘iconreact nativesvgicon [React] axios 와 fetch 차이점 -> 개인적인 생각으로는 사용법이 살짝 다르지만, 전체적으로 비슷한데, axios 가 좀 더 사용자가 인지하기 쉽게? fetch 에는 존재하지 않는 기능이 좀 더 많다. React Native 의 경우에 업데이트가 잦기 때문에, 라이브러리(예를들면, axios 같은 것들..)이 이 업데이트를 쫓아오지 못하는 경우가 생기는데, Fetch 는 이걸 걱정할 필요 없이 사용 가능 Axios JSON... Reactreact nativeFetchaxiosFetch [RA] React Native - 로그인예제1 (+이슈리스트) React Native + node.js 로그인 예제 실행과정과 진행현황 등을 기록한 글입니다. 노드 서버 설정 cmd를 켜고 위 명령어를 입력해 서버를 설정한다. 개발환경 구축 cmd를 켜고 위 명령어를 입력해 개발환경을 구축한다. 디렉토리와 파일구조 생성 프로젝트의 구조는 위 이미지처럼 되어있어야한다. 안드로이드 스튜디오 설정 Tools -> SDK Manager -> SDK Platfo... react nativereact native [React Native] PhaseScriptExecution error (in target 'FBReactNativeSpec' from project 'Pods') PhaseScriptExecution [CP-User]\ Generate\ Specs /Users/사용자/Library/Developer/Xcode/DerivedData/project-cawbghttjvsyffdmgdqopcavjwgr/Build/Intermediates.noindex/Pods.build/Debug-iphonesimulator/FBReactNativeSpec.build/Scr... react native errorreact nativereact native [React-Native] TypeError: Cannot read property 'transformFile' of undefined react-native을 처음으로 설치해봤습니다. 시뮬레이터를 돌려봅니다. simulator는 정상적으로 뜨는데, build에러가 발생했습니다. transformer가 undefined라는 error입니다. 해결방법을 찾아봅니다. npm 버전을 낮추라 현재 Latest version은 17.xx.xx 입니다. 이걸 낮추라는 의견(LTS로 낮추라는 의견)이 많았습니다. v14.18.1 로 낮추... react nativereact native [RA] React Native - 로그인예제 2 (+이슈리스트) React Native + node.js + Mysql 로그인 예제 실행과정과 진행현황 등을 기록한 글입니다. MySQL 환경 구축 Node.js 백엔드 서버 실행 그 후 app.js의 아래부분을 자신의 환경에 맞게 수정해준다. app.js를 저장해준 뒤 cmd창에서 아래 명령어를 입력해 Node.js서버를 실행시켜 준다. node app 리액트 프론트 실행 리액트 네이티브 실행 ❗ node... react nativereact native react-native와 Rest API 통신하기 이번 편은 react와 rest api 통신을 다룬 포스트( )의 글을 참고했습니다 (감사합니다) What is Rest API ? Representational State Transfer API 의 약자로, 자원을 이름으로 구분하여 자원의 상태(정보)를 주고 받는 모든 것을 의미한다. 다시 한 번 정리하자면, HTTP URI 를 통해 자원을 명시하고 HTTP Method(POST, GET,... axiosREST APIreact nativeREST API [React-Native] Text strings must be rendered within a <Text> components (빈문자열에 대한 에러) 위와 같이 error의 초기값이 ''이면 string type이기 때문에 Render Error가 발생합니다. 따라서 error 초기값을 string이 아닌 boolean(false)으로 바꿔주면 해결됩니다.... react nativereact native [React-Native] metro terminal이 실행되지 않는 경우 간혹 앱을 끄고 재시작을 하다보면, metro가 실행되지 않는 경우가 있습니다. 를 하였는데, 자동으로 metro의 launchCommander가 실행되지 않는 경우인데요, port를 kill하고 재시작을 해주도록 합니다. Step-1. 사용중인 Port 확인 아래 명령어를 치면 현재 어떤 포트가 사용되고 있는지 알 수 있습니다. Step-2. Port 확인해보기 사용중인 port를 종료해도... react nativereact native [React Native 애니메이션] 파도 만들기 🌊 위 그림에서 가장 왼쪽 점이 시작점이고, 나머지 3개의 점 중 곡선 위에 없는 두 개의 점이 컨트롤 포인트입니다. 컨트롤 포인트의 위치에 따라 호의 모양이 달라지는 것을 잘 기억해 주세요! 컨트롤 포인트 첫 번째(c1)는 (0.3, 0.2)로 좌측 상단. 두 번째(c2)는 (0.7, 0.8)로 우측 하단. 두 컨트롤 포인트를 각각 상단과 하단에 배치했기 때문에 사인 그래프 형태로 표현할 수 ... jacobonthecodeanimationreact-native-reanimatedreact native animationreact-native-svgreact nativeanimation [React Native] 시작하기 React Native 개발환경 React Native CLI 준비 : Xcode(iOS) 또는 Android Studio(windows) Expo CLI의 많은 이슈로 React Native CLI을 사용할 예정 1. Chocolatey 설치 Chocolatey 설치 확인 - Node.js 설치 및 확인 - jdk8 설치 및 확인 (무조건 jdk8 이상으로 설치하기) windows 사용자로... 리액트 네이티브react nativereact native [RA] React Native - 로그인예제 개발환경 구축 (+모듈 버전) Mysql + node.js + React native 앱 로그인, 회원가입 예제입니다. 개발환경 구축 MYsql node.js에서 데이터를 불러오기 위해 MYsql로 로컬 데이터베이스를 구축한다. Mysql에서 아래 코드를 실행해 RNTest라는 데이터베이스를 만든다. RNTest안에 4개의 테이블을 만든다. myinfo - TabHome MYToday에 있는 심박수, 걸음수 등등의 정보를... react nativereact native [앱개발]- 종류(Native, Hybrid, Cross-platform) and React Native, JS 정리해보자면 사용자들이 보는 앱 화면을 만들고 앱 개발은 대표적으로 "안드로이드"와 "iOS(아이폰)" 두 가지가 있다. 💡 앱 개발 종류 먼저 앱 개발 종류를 살펴보자면 안드로이드, iOS 각각 개발 하는 네이티브 앱! 마지막으로 위 두 가지 방법을 합친 크로스 플랫폼 앱! 🔍 네이티브 앱 (Native App) 다른 방식들보다 높은 수준의 기술력이 필요하며, 각기의 모바일 운영체제(OS)... 리액트 네이티브하이브리드 앱리터럴네이티브 앱비구조 할당Hybrid AppCross-platform Appmodule systemNative App크로스 플랫폼 앱화살표 함수react nativeMaparrow function자바스크립트Cross-platform App [앱개발]-React Native Expo JSX 리액트 네이티브(기술) & Expo(도구) 리액트 네이티브는 자바스크립트(js) 언어 하나로 안드로이드 앱과 iOS앱 두 가지 모두 만들어주는 라이브러리 이다. (라이브러리란 개발 할 때 사용하는 도구이다.) 리액트 네이티브 크로스 플랫폼으로 개발하기 위한 빌드 도구이며, 네이티브 모듈을 보다 쉽고 편하게 사용할 수 있게 도와주는 도구이다. 리액트 네이티브 하나로 안드로이드 앱과 iOS앱 두... 리액트 네이티브JSXNodereact nativenpmExpoExpo React-native 시작하기 homebrew 설치 정상적으로 설치가 되었으면 아래와 같이 버전 확인이 가능하다. node 설치 설치가 정상적으로 되었다면 아래와 같이 node와 npm 버전 확인이 가능하다. watchman 설치 react-native에서는 소스코드의 추가, 변경이 발생하면 다시 빌드하기 위해 Watchman을 사용하고 있습니다. brew install watchman 명령으로 설치 설치가 정상적으로 되... react nativereact native React-Native [11. Firebase로 특정 데이터 조회/저장] 한꺼번에 모든 데이터를 가지고 페이지를 이동하는것은 상식적으로 느릴 수 밖에 없다. 이동하는 페이지에 필요한 데이터만 가지고 오는 기능이 필요한 이유! 카드를 클릭하면 기존에는 content 데이터 전부를 넘겨주었었는데, 이를 {idx:content.idx}, 즉 primary key만 넘겨준다. {idx: 클릭한 카드의 idx}를 넘겨받은 DetailPage는, firebase_db를 사용... react nativeFirebaseFirebase 로그인/회원가입 구현하기 - (2) SignIn/Up Screens 감사합니다 🙏 3편은 그 외 다른 screen 구현에 대해 상세하게 다루겠습니다. SignInScreen을 구성하는 컴포넌트는 Text와 TextInput(CustomInput), Button(CustomButton) 등이 있습니다. TextInput과 Input으로 받은 값들을 Submit하기 위한 컴포넌트들은 다른 screen에서도 많이 재사용돼서 하나의 Custom Component로 ... react native로그인졸프회원가입react native styled-components, theme 1-1.make styled.js use in App.js 36번, 47~52번 주의깁게 볼것. 사용! background-color:${props=> props.theme.mainBgColor}... styled componentsreact nativethemereact native React-Native [10. Firebase로 데이터 관리하기] 구글에서 만든 서버리스(Serverless) 서비스 Serverless 서버가 없다는 뜻이 아닌, 서버를 직접 만들 필요가 없다는 뜻! 필요한 서버 기능을 제공하는곳에서 서비스를 사용하기 때문에 매우 편리하다. 프로젝트를 생성한 후 앱/파일 저장소/리얼타임 데이터베이스를 생성해야한다. 앱 생성은 현재 개발중인 앱과 연동을 위해 필요한 작업이다. 이미지 저장은 파일 저장소에, JSON 데이터 ... react nativeFirebaseFirebase React Native - 프로젝트 만들기 터미널에 아래 명령어 입력 Node.js 환경에서 구동되는 CLI 도구들을 간단하게 사용할 수 있게 해줍니다. 생성한 프로젝트를 열어 package.json을 보면 아래와 같은 코드가 있습니다. 스크립트가 설정되면 다음과 같은 명령어를 실행할 수 있습니다. yarn android : 안드로이드 환경에서 앱 구동 yarn ios : ios 환경에서 앱 구동 yarn start : Metro를 ... react nativereact native 로그인/회원가입 구현하기 - (3) Extra Screens 감사합니다 🙏 2편에 이어서 오늘은 남은 ConfirmEmailScreen, ForgotPasswordScreen, NewPasswordScreen을 구현해보겠습니다. 이번 편은 앞서 구현한 screen들과 동일한 방법(컴포넌트)을 사용하기 때문에 앞에 내용을 이해하셨다면 생략하셔도 됩니다. 회원가입을 할 때 입력했던 이메일 주소를 인증할 때 필요한 화면입니다. 사용자는 SignUpScree... 로그인졸프UIUX회원가입react nativeUIUX react-native-config 설치 및 사용법 IOS Xcode에서 project's name -> Libraries -> Add Files to [your project's name] -> ReactNativeConfig.xcodeproj 추가 ReactNativeConfig.xcodeproj 경로: 프로젝트 -> node_modules -> react-native-config -> ios Build Phases -> Link Bina... react nativeconfiglibraryconfig
"RNGestureHandlerRootView" was not found in the UIManager 에러를 하나 해결하면 또 다른 에러를 마주하는 것은 개발자의 숙명인가,,,, "cb() never called!" 에러를 해결한 후 바로 다른 에러를 만났다... 생소한 에러문을 보고 놀랐으나 다행히도 이 에러는 쉽게 해결할 수 있었다! expo install react-native-gesture-handler 를 통해서 추가적으로 설치하니 문제를 해결할 수 있었다! 또한 이 에러의 다른 해... react native내가 만났던 모든 에러들react native [React] useEffect vs useLayoutEffect useEffect hook만 사용하다 useLayoutEffect hook을 알게되어 차이점을 기록하려한다. 두 hook은 화면이 렌더링될 때 실행된다는 점에서는 동일하다. 그러나 약간의 차이점이 존재한다. 1) useEffect 화면이 레이아웃과 배치가 끝난 이후 실행된다. 아래의 코드를 살펴보자 위의 코드는 화면이 렌더링 될때 count state를 25로 변경해준 후 렌더링 할 것이다.... Reactreact nativeReact React Native - 개발 환경 설정 리액트 네이티브(React Native)는 자바스크립트(JavaScript)와 리액트(React) 라이브러리를 사용해 네이티브 앱을 개발할 수 있게 해주는 기술입니다. 리액트 네이티브를 사용해 만든 앱은 iOS환경, Android환경에서 모두 구동할 수 있습니다. 1. Node.js와 npm 설치하기 1.1 MacOS에서 설치하기 다음과 같은 스크릅트가 있습니다. 이 명령어를 입력하고 나서 ... ios 개발개발 공부react nativeios 개발 typescript 에러 'string | null' 형식의 인수는 'string' 형식의 매개 변수에 할당될 수 없습니다. 'null' 형식은 'string' 형식에 할당할 수 없습니다. 1. 무슨 내용의 에러인가 1. 우선 코드를 살펴보자 AsyncStorage에 있는 todos라는 key로 Object Value를 가져와서 rawTodos 변수에 저장한다. rawTodos에 저장되어있는 Object를 JSON.... 에러react nativetypescriptreact native React Native 에 SVG Icon 컴포넌트 작성 하지만 React Native 에서는 기본적으로 SVG 파일을 지원하지 않는다. 그럼 React Native 에서 SVG 파일을 아이콘으로 사용할 수 있도록 설정 및 구현해보자. 는 React Native 프로젝트에서 SVG 및 관련 엘리먼트들을 웹과 유사한 형식으로 사용할 수 있게 해주는 라이브러리다. react-native-svg 는 <Svg />, <G />, <Path /> 등 거의 ... react-native-svgreact-native-svg-transformer아이콘iconreact nativesvgicon [React] axios 와 fetch 차이점 -> 개인적인 생각으로는 사용법이 살짝 다르지만, 전체적으로 비슷한데, axios 가 좀 더 사용자가 인지하기 쉽게? fetch 에는 존재하지 않는 기능이 좀 더 많다. React Native 의 경우에 업데이트가 잦기 때문에, 라이브러리(예를들면, axios 같은 것들..)이 이 업데이트를 쫓아오지 못하는 경우가 생기는데, Fetch 는 이걸 걱정할 필요 없이 사용 가능 Axios JSON... Reactreact nativeFetchaxiosFetch [RA] React Native - 로그인예제1 (+이슈리스트) React Native + node.js 로그인 예제 실행과정과 진행현황 등을 기록한 글입니다. 노드 서버 설정 cmd를 켜고 위 명령어를 입력해 서버를 설정한다. 개발환경 구축 cmd를 켜고 위 명령어를 입력해 개발환경을 구축한다. 디렉토리와 파일구조 생성 프로젝트의 구조는 위 이미지처럼 되어있어야한다. 안드로이드 스튜디오 설정 Tools -> SDK Manager -> SDK Platfo... react nativereact native [React Native] PhaseScriptExecution error (in target 'FBReactNativeSpec' from project 'Pods') PhaseScriptExecution [CP-User]\ Generate\ Specs /Users/사용자/Library/Developer/Xcode/DerivedData/project-cawbghttjvsyffdmgdqopcavjwgr/Build/Intermediates.noindex/Pods.build/Debug-iphonesimulator/FBReactNativeSpec.build/Scr... react native errorreact nativereact native [React-Native] TypeError: Cannot read property 'transformFile' of undefined react-native을 처음으로 설치해봤습니다. 시뮬레이터를 돌려봅니다. simulator는 정상적으로 뜨는데, build에러가 발생했습니다. transformer가 undefined라는 error입니다. 해결방법을 찾아봅니다. npm 버전을 낮추라 현재 Latest version은 17.xx.xx 입니다. 이걸 낮추라는 의견(LTS로 낮추라는 의견)이 많았습니다. v14.18.1 로 낮추... react nativereact native [RA] React Native - 로그인예제 2 (+이슈리스트) React Native + node.js + Mysql 로그인 예제 실행과정과 진행현황 등을 기록한 글입니다. MySQL 환경 구축 Node.js 백엔드 서버 실행 그 후 app.js의 아래부분을 자신의 환경에 맞게 수정해준다. app.js를 저장해준 뒤 cmd창에서 아래 명령어를 입력해 Node.js서버를 실행시켜 준다. node app 리액트 프론트 실행 리액트 네이티브 실행 ❗ node... react nativereact native react-native와 Rest API 통신하기 이번 편은 react와 rest api 통신을 다룬 포스트( )의 글을 참고했습니다 (감사합니다) What is Rest API ? Representational State Transfer API 의 약자로, 자원을 이름으로 구분하여 자원의 상태(정보)를 주고 받는 모든 것을 의미한다. 다시 한 번 정리하자면, HTTP URI 를 통해 자원을 명시하고 HTTP Method(POST, GET,... axiosREST APIreact nativeREST API [React-Native] Text strings must be rendered within a <Text> components (빈문자열에 대한 에러) 위와 같이 error의 초기값이 ''이면 string type이기 때문에 Render Error가 발생합니다. 따라서 error 초기값을 string이 아닌 boolean(false)으로 바꿔주면 해결됩니다.... react nativereact native [React-Native] metro terminal이 실행되지 않는 경우 간혹 앱을 끄고 재시작을 하다보면, metro가 실행되지 않는 경우가 있습니다. 를 하였는데, 자동으로 metro의 launchCommander가 실행되지 않는 경우인데요, port를 kill하고 재시작을 해주도록 합니다. Step-1. 사용중인 Port 확인 아래 명령어를 치면 현재 어떤 포트가 사용되고 있는지 알 수 있습니다. Step-2. Port 확인해보기 사용중인 port를 종료해도... react nativereact native [React Native 애니메이션] 파도 만들기 🌊 위 그림에서 가장 왼쪽 점이 시작점이고, 나머지 3개의 점 중 곡선 위에 없는 두 개의 점이 컨트롤 포인트입니다. 컨트롤 포인트의 위치에 따라 호의 모양이 달라지는 것을 잘 기억해 주세요! 컨트롤 포인트 첫 번째(c1)는 (0.3, 0.2)로 좌측 상단. 두 번째(c2)는 (0.7, 0.8)로 우측 하단. 두 컨트롤 포인트를 각각 상단과 하단에 배치했기 때문에 사인 그래프 형태로 표현할 수 ... jacobonthecodeanimationreact-native-reanimatedreact native animationreact-native-svgreact nativeanimation [React Native] 시작하기 React Native 개발환경 React Native CLI 준비 : Xcode(iOS) 또는 Android Studio(windows) Expo CLI의 많은 이슈로 React Native CLI을 사용할 예정 1. Chocolatey 설치 Chocolatey 설치 확인 - Node.js 설치 및 확인 - jdk8 설치 및 확인 (무조건 jdk8 이상으로 설치하기) windows 사용자로... 리액트 네이티브react nativereact native [RA] React Native - 로그인예제 개발환경 구축 (+모듈 버전) Mysql + node.js + React native 앱 로그인, 회원가입 예제입니다. 개발환경 구축 MYsql node.js에서 데이터를 불러오기 위해 MYsql로 로컬 데이터베이스를 구축한다. Mysql에서 아래 코드를 실행해 RNTest라는 데이터베이스를 만든다. RNTest안에 4개의 테이블을 만든다. myinfo - TabHome MYToday에 있는 심박수, 걸음수 등등의 정보를... react nativereact native [앱개발]- 종류(Native, Hybrid, Cross-platform) and React Native, JS 정리해보자면 사용자들이 보는 앱 화면을 만들고 앱 개발은 대표적으로 "안드로이드"와 "iOS(아이폰)" 두 가지가 있다. 💡 앱 개발 종류 먼저 앱 개발 종류를 살펴보자면 안드로이드, iOS 각각 개발 하는 네이티브 앱! 마지막으로 위 두 가지 방법을 합친 크로스 플랫폼 앱! 🔍 네이티브 앱 (Native App) 다른 방식들보다 높은 수준의 기술력이 필요하며, 각기의 모바일 운영체제(OS)... 리액트 네이티브하이브리드 앱리터럴네이티브 앱비구조 할당Hybrid AppCross-platform Appmodule systemNative App크로스 플랫폼 앱화살표 함수react nativeMaparrow function자바스크립트Cross-platform App [앱개발]-React Native Expo JSX 리액트 네이티브(기술) & Expo(도구) 리액트 네이티브는 자바스크립트(js) 언어 하나로 안드로이드 앱과 iOS앱 두 가지 모두 만들어주는 라이브러리 이다. (라이브러리란 개발 할 때 사용하는 도구이다.) 리액트 네이티브 크로스 플랫폼으로 개발하기 위한 빌드 도구이며, 네이티브 모듈을 보다 쉽고 편하게 사용할 수 있게 도와주는 도구이다. 리액트 네이티브 하나로 안드로이드 앱과 iOS앱 두... 리액트 네이티브JSXNodereact nativenpmExpoExpo React-native 시작하기 homebrew 설치 정상적으로 설치가 되었으면 아래와 같이 버전 확인이 가능하다. node 설치 설치가 정상적으로 되었다면 아래와 같이 node와 npm 버전 확인이 가능하다. watchman 설치 react-native에서는 소스코드의 추가, 변경이 발생하면 다시 빌드하기 위해 Watchman을 사용하고 있습니다. brew install watchman 명령으로 설치 설치가 정상적으로 되... react nativereact native React-Native [11. Firebase로 특정 데이터 조회/저장] 한꺼번에 모든 데이터를 가지고 페이지를 이동하는것은 상식적으로 느릴 수 밖에 없다. 이동하는 페이지에 필요한 데이터만 가지고 오는 기능이 필요한 이유! 카드를 클릭하면 기존에는 content 데이터 전부를 넘겨주었었는데, 이를 {idx:content.idx}, 즉 primary key만 넘겨준다. {idx: 클릭한 카드의 idx}를 넘겨받은 DetailPage는, firebase_db를 사용... react nativeFirebaseFirebase 로그인/회원가입 구현하기 - (2) SignIn/Up Screens 감사합니다 🙏 3편은 그 외 다른 screen 구현에 대해 상세하게 다루겠습니다. SignInScreen을 구성하는 컴포넌트는 Text와 TextInput(CustomInput), Button(CustomButton) 등이 있습니다. TextInput과 Input으로 받은 값들을 Submit하기 위한 컴포넌트들은 다른 screen에서도 많이 재사용돼서 하나의 Custom Component로 ... react native로그인졸프회원가입react native styled-components, theme 1-1.make styled.js use in App.js 36번, 47~52번 주의깁게 볼것. 사용! background-color:${props=> props.theme.mainBgColor}... styled componentsreact nativethemereact native React-Native [10. Firebase로 데이터 관리하기] 구글에서 만든 서버리스(Serverless) 서비스 Serverless 서버가 없다는 뜻이 아닌, 서버를 직접 만들 필요가 없다는 뜻! 필요한 서버 기능을 제공하는곳에서 서비스를 사용하기 때문에 매우 편리하다. 프로젝트를 생성한 후 앱/파일 저장소/리얼타임 데이터베이스를 생성해야한다. 앱 생성은 현재 개발중인 앱과 연동을 위해 필요한 작업이다. 이미지 저장은 파일 저장소에, JSON 데이터 ... react nativeFirebaseFirebase React Native - 프로젝트 만들기 터미널에 아래 명령어 입력 Node.js 환경에서 구동되는 CLI 도구들을 간단하게 사용할 수 있게 해줍니다. 생성한 프로젝트를 열어 package.json을 보면 아래와 같은 코드가 있습니다. 스크립트가 설정되면 다음과 같은 명령어를 실행할 수 있습니다. yarn android : 안드로이드 환경에서 앱 구동 yarn ios : ios 환경에서 앱 구동 yarn start : Metro를 ... react nativereact native 로그인/회원가입 구현하기 - (3) Extra Screens 감사합니다 🙏 2편에 이어서 오늘은 남은 ConfirmEmailScreen, ForgotPasswordScreen, NewPasswordScreen을 구현해보겠습니다. 이번 편은 앞서 구현한 screen들과 동일한 방법(컴포넌트)을 사용하기 때문에 앞에 내용을 이해하셨다면 생략하셔도 됩니다. 회원가입을 할 때 입력했던 이메일 주소를 인증할 때 필요한 화면입니다. 사용자는 SignUpScree... 로그인졸프UIUX회원가입react nativeUIUX react-native-config 설치 및 사용법 IOS Xcode에서 project's name -> Libraries -> Add Files to [your project's name] -> ReactNativeConfig.xcodeproj 추가 ReactNativeConfig.xcodeproj 경로: 프로젝트 -> node_modules -> react-native-config -> ios Build Phases -> Link Bina... react nativeconfiglibraryconfig